<template>
	<view class="">
		<u-search placeholder="请输入关键字" v-model="keyword" :clearabled="true" :focus='true' :showAction="false" @change="getSearchList(keyword)"></u-search>
		<!-- <cl-card :show-more="false">
			<cl-search  placeholder="请输入商品名称" :show-search-button="false">
				<cl-button slot="append" type="success" ><text>搜索</text></cl-button>
			</cl-search>
		</cl-card> -->

		<view class="sear_record">
			<view class="search_rTit">
				<text class="search_pa">历史搜索</text>
				<text class="iconfont icon-lajitong"></text>
			</view>
			<view class="search_hotBox"><text>狗粮</text></view>
		</view>
		<!-- <cl-confirm ref="search"></cl-confirm> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			requt: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			clearabled: true,
			keyword: '',   //搜索关键词
			skip:0,
			limit:10,
			timer:null, //延迟器
		};
	},
	onLoad() {},
	methods: {
		//输入框事件
		getSearchList(keyword){
			//2. 500ms内连续输入内容清除定时器
			clearTimeout(this.timer)
			//1. 500ms定时器，之后打印输入内容
			this.timer=setTimeout(()=>{
				// console.log(keyword);
				this.keyword=keyword
				console.log(this.keyword);
			},500)
		},
		// getSearchList(keyword){
		// 	console.log(key_word);
		// 	let {skip,limit}=this
		// 			   uni.request({
		// 			url: this.requt + '/api/get_search_list',
		// 			method: 'POST',
		// 			data: {
		// 				keyword,
		// 				skip,
		// 				limit
		// 			},
		// 			success: res => {
		// 				console.log(res);
		// 			},
		// 			fail: err => {
		// 				console.error(err);
		// 			}
		// 		});
		// }
		
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
/deep/ .cl-card__header {
	height: 0;
}
/deep/ .cl-card {
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
	border-radius: 0;
}
/deep/ .cl-button.cl-button--success {
	background-color: $color1;
	border-color: $color1;
}
.sear_record {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 0 30upx;
	.search_rTit {
		width: 100%;
		height: auto;

		overflow: hidden;
		.search_pa {
			font-size: 30upx;
			color: #333;
			line-height: 80upx;
			font-weight: bold;
		}
		.iconfont {
			font-size: 36upx;
			float: right;
			line-height: 80upx;
			color: #666;
		}
	}
	.search_hotBox {
		width: 100%;
		height: auto;
		overflow: hidden;
		text {
			display: inline-block;
			font-size: 28upx;
			line-height: 56upx;
			background: #eee;
			padding: 0 30upx;
			margin-right: 20upx;
			margin-bottom: 20upx;
			border-radius: 40upx;
		}
	}
}
</style>
